<template>
    <div class="user-manage">
      <div class="query-form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="菜单管理">
               <el-input v-model="formInline.userId" placeholder="用户ID" clearable />
             </el-form-item>
             <el-form-item label="菜单状态" placeholder="菜单状态"  clearable>
               <el-select
                 v-model="formInline.state"
                 placeholder="用户状态"
                 clearable
               >
                 <el-option label="正常" :value="0" />
                 <el-option label="在职" :value="1" />
               </el-select>
             </el-form-item>
             <!-- <el-form-item label="Activity time">
               <el-date-picker
                 v-model="formInline.date"
                 type="date"
                 placeholder="Pick a date"
                 clearable
               />
             </el-form-item> -->
             <el-form-item>
               <el-button type="primary" @click="onChaxun">查询</el-button>
             </el-form-item>
           </el-form>
      </div>
      <div class="base-table" >
          <div class="acion">按钮区域</div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="idMenu"
            border
            default-expand-all
          >
            <el-table-column prop="name" label="菜单名称" sortable />
            <el-table-column prop="path" label="菜单路由"  />   
            <el-table-column prop="MenuType" label="菜单类型"  />    
            <el-table-column prop="MenuState" label="菜单状态"  />    
    
            <el-table-column  label="操作"  align="center">
    
            <template #default="scope">
              <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">新增</el-button>
              <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
           </el-table>

       </div>
   </div>
  </template>
  <script setup>
  import {qgetMenu} from "../../api/menu"
  import { onMounted, ref } from "vue";

  const tableData = ref()

  const getMenu = ()=>{
    console.log("请求菜单")
    qgetMenu().then(res=>{
      console.log(res.data)
      tableData.value = res.data
    }).catch(err=>{
      console.log(err)
    })
  }

  const formInline = ref({
    userId:'',
    userName:'',
    state:''
  })
  


  onMounted(()=>{
    getMenu()
  })

  </script>
<style lang="scss">
.query-form{
  background: #fff;
  border-radius: 5px;
  padding: 18px 20px 0;

}
.base-table{
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
.demo-form-inline .el-input {
  --el-input-width: 190px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}
</style>